<template>
	<view class="storeBox">
		<view class="top" @click="goToBack">
			<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/downArrow.png" mode=""></image>
			<view class="">结算记录</view>
		</view>
		<view class="content">
			<view class="list" v-for="(item, index) in list" :key="index">
				<view class="left">
					<view>{{ item.settlementDate }}</view>
					<view class="">结算时间{{ item.updateTime }}</view>
				</view>
				<view class="">{{ item.type}} {{ item.settlementAmount }}元</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyInfo,
		getSetTelementDetailList,
		getSetTelementDetailListWithCompany
	} from '@/utils/req/api.js';
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex';
	export default {
		data() {
			return {
				list: [],
				type: 'personal',
				companyId: null,
			};
		},
		mounted() {
			this.getDetailList();
		},
		onLoad(options) {
			let {
				type,
				companyId
			} = options;
			this.type=type;
			this.companyId=companyId
		},
		computed: {
			...mapState('commonModule', ['myInfo'])
		},
		methods: {
			goToBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			async getDetailList() {
				let res;
				if (this.type == 'personal') {
					res = await getSetTelementDetailList();
				} else if (this.type == 'company') {
					res = await getSetTelementDetailListWithCompany({
						merchantId: this.myInfo.id,
						companyId: this.companyId
					});
				}
				console.log('listRes', res);
				this.list = res.data.result;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.storeBox {
		background-color: #f5f5f5;
		padding-bottom: 150rpx;
		min-height: 100vh;
	}

	.top {
		background-color: #fff;
		text-align: center;
		padding: 30rpx 0;
		position: relative;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 2;

		image {
			width: 30rpx;
			height: 30rpx;
			transform: rotate(90deg);
			position: absolute;
			left: 40rpx;
			top: calc((100% - 30rpx) / 2);
		}
	}

	.content {
		padding: 40rpx 0;
	}

	.list {
		background-color: #fff;
		padding: 20rpx 40rpx;
		@include flexs(space-between, center);
		flex-wrap: wrap;
		font-size: 30rpx;
		line-height: 1.5;
		border-bottom: 1px solid #eee;

		&:first-child {
			padding-top: 20px;
		}

		&:last-child {
			padding-bottom: 20px;
		}

		>view {
			margin-left: 30rpx;
		}

		.left {
			>view:nth-child(2) {
				font-size: 26rpx;
			}
		}
	}
</style>